<template>
  <div class="tree-item" :style="{ paddingLeft: depth * 20 + 'px' }">
    <div 
      class="item-content"
      :class="{ 'is-folder': item.type === 'folder', 'is-document': item.type === 'document' }"
      @click="handleClick"
      @dragstart="handleDragStart"
      @dragover="handleDragOver"
      @drop="handleDrop"
      draggable="true"
    >
      <div class="item-left">
        <span 
          v-if="item.type === 'folder'" 
          class="expand-icon"
          @click.stop="toggleExpanded"
        >
          {{ isExpanded ? '📂' : '📁' }}
        </span>
        <span v-else class="file-icon">📄</span>
        <span class="item-title">{{ item.title }}</span>
      </div>
      
      <div class="item-actions">
        <button 
          v-if="item.type === 'folder'" 
          @click.stop="createDocument"
          class="action-btn"
          title="在此文件夹中创建文档"
        >
          ➕
        </button>
        <button 
          v-if="item.type === 'folder'" 
          @click.stop="createFolder"
          class="action-btn"
          title="在此文件夹中创建子文件夹"
        >
          📁+
        </button>
        <button 
          @click.stop="deleteItem"
          class="action-btn delete-btn"
          title="删除"
        >
          🗑️
        </button>
      </div>
    </div>
    
    <div class="item-meta" v-if="item.type === 'document'">
      创建时间: {{ formatDate(item.created_at) }} | 
      最后编辑: {{ formatDate(item.updated_at) }}
    </div>
    
    <!-- 递归显示子项 -->
    <div v-if="item.type === 'folder' && isExpanded && item.children && item.children.length > 0" class="children">
      <DocumentTreeItem 
        v-for="child in item.children" 
        :key="child.id" 
        :item="child"
        :depth="depth + 1"
        @open="$emit('open', $event)"
        @move="$emit('move', $event.itemId, $event.newParentId)"
        @delete="$emit('delete', $event)"
        @create-document="$emit('create-document', $event)"
        @create-folder="$emit('create-folder', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Document {
  id: number
  title: string
  content?: string
  type: 'document' | 'folder'
  parent_id?: number
  sort_order: number
  created_at: string
  updated_at: string
  children?: Document[]
}

interface Props {
  item: Document
  depth: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  open: [item: Document]
  move: [event: { itemId: number, newParentId?: number }]
  delete: [item: Document]
  'create-document': [parentId: number]
  'create-folder': [parentId: number]
}>()

const isExpanded = ref(true)

const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value
}

const handleClick = () => {
  if (props.item.type === 'document') {
    emit('open', props.item)
  } else {
    toggleExpanded()
  }
}

const handleDragStart = (event: DragEvent) => {
  event.dataTransfer?.setData('text/plain', props.item.id.toString())
}

const handleDragOver = (event: DragEvent) => {
  if (props.item.type === 'folder') {
    event.preventDefault()
  }
}

const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  const draggedItemId = parseInt(event.dataTransfer?.getData('text/plain') || '0')
  
  if (draggedItemId && draggedItemId !== props.item.id && props.item.type === 'folder') {
    emit('move', { itemId: draggedItemId, newParentId: props.item.id })
  }
}

const createDocument = () => {
  emit('create-document', props.item.id)
}

const createFolder = () => {
  emit('create-folder', props.item.id)
}

const deleteItem = () => {
  emit('delete', props.item)
}

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}
</script>

<style scoped>
.tree-item {
  margin-bottom: 2px;
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.item-content:hover {
  background-color: #f5f5f5;
}

.item-content.is-folder {
  background-color: #fff3e0;
}

.item-content.is-folder:hover {
  background-color: #ffe0b2;
}

.item-content.is-document:hover {
  background-color: #e8f5e8;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.expand-icon {
  cursor: pointer;
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
}

.file-icon {
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
}

.item-title {
  font-weight: 500;
  color: #333;
}

.item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.item-content:hover .item-actions {
  opacity: 1;
}

.action-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: #e0e0e0;
}

.delete-btn:hover {
  background-color: #ffebee;
  color: #d32f2f;
}

.item-meta {
  font-size: 0.8rem;
  color: #666;
  margin-left: 2rem;
  margin-top: 0.25rem;
}

.children {
  margin-left: 0;
}

/* 拖拽相关样式 */
.item-content[draggable="true"] {
  cursor: grab;
}

.item-content[draggable="true"]:active {
  cursor: grabbing;
}

.item-content.is-folder {
  position: relative;
}

.item-content.is-folder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed transparent;
  border-radius: 4px;
  pointer-events: none;
  transition: border-color 0.2s;
}

.item-content.is-folder:hover::after {
  border-color: #42b983;
}
</style>